import React, { Component } from "react";
import { Form, Input, Modal, DatePicker, Upload, Button } from "antd";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");

const { RangePicker } = DatePicker;
const { TextArea } = Input;
class AddActivityForm extends Component {
    state = {
        fileName: "",
        flag: 0,
    };
    render() {
        const { visible, onCancel, onOk, form, confirmLoading } = this.props;
        const { getFieldDecorator, setFieldsValue } = form;
        const formItemLayout = {
            labelCol: {
                sm: { span: 4 },
            },
            wrapperCol: {
                sm: { span: 16 },
            },
        };
        // const disabledDate = (current) =>
        //     (current && current > moment().endOf("day")) ||
        //     current < moment().subtract(6, "months");
        // console.log(Upload);
        return (
            <Modal
                title="编辑"
                visible={visible}
                onCancel={onCancel}
                onOk={onOk}
                confirmLoading={confirmLoading}
            >
                <Form {...formItemLayout}>
                    {/* <Form.Item label="活动id:">
                        {getFieldDecorator("activityId", { rules: [{ required: true }] })(<Input />)}
                    </Form.Item> */}
                    <Form.Item label="活动全称:">
                        {getFieldDecorator("fullTitle", { rules: [{ required: true }] })(
                            <Input placeholder="全称" />
                        )}
                    </Form.Item>
                    <Form.Item label="活动简称:">
                        {getFieldDecorator("shortTitle", { rules: [{ required: true }] })(
                            <Input placeholder="简称" />
                        )}
                    </Form.Item>
                    <Form.Item label="活动时间:">
                        {getFieldDecorator("activityTime", {
                            rules: [{ required: true, message: "请选择时间!" }],
                        })(
                            <RangePicker
                                showTime
                                disabledDate={this.disabledDate}
                                format="YYYY-MM-DD"
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="活动地点:">
                        {getFieldDecorator("activitySpot", { rules: [{ required: true }] })(
                            <Input />
                        )}
                    </Form.Item>
                    <Form.Item label="活动图片:">
                        {getFieldDecorator("activityImg", { rules: [{ required: false }] })(
                            <Input disabled={true} />
                        )}
                        <Upload
                            action="https://api.hiehie.top:6001/upload/" //此处被编辑----------------------------------------------------------
                            listType="picture"
                            maxCount={1}
                            accept="image/gif,image/png,image/jpg,image/jpeg,image/svg,image/webp"
                            showUploadList={false}
                            method="post"
                            onChange={(f) => {
                                console.log(f);
                                if (f.file.status === "done") {
                                    setFieldsValue({
                                        activityImg: f.file.response,
                                    });
                                }
                            }}
                            name="image"
                        >
                            <Button>上传图片</Button>
                        </Upload>
                    </Form.Item>
                    <Form.Item label="活动内容:">
                        {getFieldDecorator("activityContent", { rules: [{ required: true }] })(
                            <TextArea rows={4} placeholder="请输入活动内容" />
                        )}
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}

export default Form.create({ name: "AddActivityForm" })(AddActivityForm);
